<template>
  <el-table
    ref="filterTable"
    v-loading="loading"
    :header-row-class-name="tableHeader"
    :row-class-name="tableRowClassName"
    border
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    :height="height || undefined"
    :max-height="height || undefined"
    :cell-style="cellStyle"
    :default-sort="{ prop: 'id', order: null }"
    style="width: 100%"
    @sort-change="sortChange"
    @filter-change="handleFilterChange"
  >

    <template v-for="(item, index) in columns">
      <el-table-column
        v-if="item.show != false"
        :key="index"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        :prop="item.prop"
        :label="item.label"
        :align="item.align ? item.align : 'left'"
        :width="item.width"
      />
      <!-- solt 自定义列-->
      <template v-if="item.type === 'slot'">
        <el-table-column
          :key="index"
          :width="item.width"
          :align="item.align ? item.align : 'left'"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <slot :name="item.slotType" :row="scope.row" />
          </template>
        </el-table-column>
      </template>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    tableOption: {
      type: Object,
      default() {
        return {}
      }
    },
    filterColums: {
      type: Array,
      default() {
        return []
      }
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    tableRowClassName: { type: Function, default: () => {} },
    loading: { type: Boolean, default: false },
    filtersList: {
      type: Array,
      default() {
        return []
      }
    },
    filtersRoleList: {
      type: Array,
      default() {
        return []
      }
    },
    columnLabel: {
      type: Array,
      default() {
        return []
      }
    },
    filterMethod: { type: Function, default: () => {} },
    cellStyle: { type: Function, default: () => {} },
    refTable: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: undefined
    },
    // 监听高度
    listenHeight: {
      type: Boolean,
      default: true
    }
  },

  methods: {
    tableHeader() {
      return 'table-header'
    },
    handleButton(methods, row, event) {
      this.$emit('handleButton', { methods: methods, row: row })
    },
    filterChange(row) {
      this.$emit('filterChange', row)
    },
    filterRoleChange(row) {
      this.$emit('filterRoleChange', row)
    },
    handleFilterChange(filters) {
      this.$emit('handleFilterChange', filters)
    },
    sortChange(filters) {
      this.$emit('sortChange', filters)
    },
    switchChange(row) {
      this.$emit('switchChange', row)
    },
    rowClick(type, value) {
      this.$emit('rowClick', type, value)
    }
  }
}
</script>
<style >
 .el-table .table-header {
  background-color: #f9f9f9;

}
.table-header th{
  background: inherit;
}
</style>
